<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swipeList" :key="item.id">
        <img :src="item.img" alt="" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swipeList: []
    }
  },
  methods: {
    async getSwipeList() {
      const { data: res } = await this.$http.get('api/getlunbo')
      if (res.status !== 0) {
        return this.$toast('获取轮播图数据失败')
      }
      this.swipeList = res.message
    }
  },
  created() {
    // 获取轮播图数据
    this.getSwipeList()
  }
}
</script>

<style>
.van-swipe {
  height: 200px;
}
.van-swipe img {
  width: 100%;
  height: 200px;
}
.van-grid-item {
    flex-basis:33.33% !important;
}
.van-grid-item img {
    width: 50%;
}
</style>
